<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8' />
	<title>3DTile Layer for Mapbox GL JS</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src="./node_modules/mapbox-gl/dist/mapbox-gl.js"></script>
	<link rel="stylesheet" type="text/css" href="./node_modules/mapbox-gl/dist/mapbox-gl.css">
	<script src="./node_modules/three/build/three.js"></script>
	<script src="./node_modules/three/examples/js/loaders/GLTFLoader.js"></script>
	<script src="./Mapbox3DTiles.js"></script>
	<script src="./apikeys.js"></script>
	<style>
		body { margin:0; padding:0; }
		#map { position:absolute; top:0; bottom:0; width:100%; }
		#controls { position:absolute; top:0; left:0; }
	</style>
</head>
<body>
<div id='map'></div>

<script>
mapboxgl.accessToken = apiKeys.mapboxAccessToken;

const urlParams = new URLSearchParams(window.location.search);

// Load the mapbox map
var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/dark-v10?optimize=true',
	center: [4.8901908, 52.3627468],
	zoom: 18.5,
	bearing: 27.8,
	pitch: 58,
	hash: true
});

map.on('style.load', function() {

	let amsterdam = new Mapbox3DTiles.Layer( { 
						id: 'amsterdamnoord', 
						url: 'https://saturnus.geodan.nl/tomt/data/buildingtiles_noord_3857/tileset.json',
						color: 0xcccccc, 
						opacity: 1.0
					} );
	map.addLayer(amsterdam, 'waterway-label');

	let ahn = new Mapbox3DTiles.Layer( { 
					id: 'ahn', 
					url: 'http://metis.geodan.nl/arnot_punten/tileset.json',
					color: 0x007722, 
					opacity: 1.0,
					pointsize: 1.0
				});
	//map.addLayer(ahn, 'waterway-label');
});
</script>

</body>
</html>